<!-- 商品列表 -->
<template>
  <div class="pageContent">
    <!-- 列表头部 -->
    <div class="shopTitle">
      <div class="shopListOne">商品列表</div>
      <div class="shopListTwo">
        <el-button @click="getList">刷新</el-button>
      </div>
    </div>
    <!-- 内容 -->
    <div class="shopListContent">
      <!-- 标签 -->
      <div class="shopTag">
        <el-button type="primary" plain color="white" @click="allShop">全部商品</el-button>
        <el-button type="primary" plain color="white" @click="upShop">已上架</el-button>
        <el-button type="primary" plain color="white" @click="downShop">未上架</el-button>
      </div>
      <!-- 筛选查询 -->
      <div class="shopSift">
        <el-collapse v-model="activeNames" style="border: 1px solid #e4e4e4;" class="chaxun">
          <el-collapse-item title="商品筛选" name="1">
            <div class="siftContent">
              <el-form :inline="true" class="demo-form-inline" :model="siftBase">
                <el-form-item label="关键词">
                  <el-input v-model="siftBase.keyWords" placeholder="商品名称 / 商品货号"></el-input>
                </el-form-item>
                <el-form-item label="品牌">
                  <el-input v-model="siftBase.brand" placeholder="品牌名称"></el-input>
                </el-form-item>
                <el-form-item label="是否上架">
                  <el-select v-model="siftBase.status" placeholder="全部">
                    <el-option label="上架" value="4"></el-option>
                    <el-option label="下架" value="3"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="分类">
                  <el-select v-model="siftBase.classifyOne" placeholder="请选择一级分类" @change="changeSelect">
                    <el-option v-for="item in classifyOneList" :key="item.categoryId" :label="item.categoryName"
                      :value="item.categoryId"></el-option>
                  </el-select>
                  ~
                  <el-select v-model="siftBase.classifyTwo" placeholder="请选择二级分类">
                    <el-option v-for="item in classifyTwoList" :key="item.categoryId" :label="item.categoryName"
                      :value="item.categoryId"></el-option>
                  </el-select>
                </el-form-item>

              </el-form>
            </div>
            <div class="siftButton">
              <el-button type="primary" @click="searchShopCon">筛选</el-button>
              <el-button @click="resetInput">重置</el-button>
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>
      <!-- 数据列表 -->
      <div class="shopListData">
        <div class="dataHead">
          <div class="dataHead-left">数据列表</div>
          <div class="dataHead-right">
            <el-form :inline="true" class="demo-form-inline" :model="setMethods">
              <el-form-item label="批量操作">
                <el-select v-model="setMethods.batchAction" placeholder="批量操作">
                  <el-option value="sj">
                    <el-button @click="shopBatchUpList" :disabled="this.batchUp.length === 0">批量上架</el-button></el-option>
                  <el-option value="xj">
                    <el-button @click="shopBatchDownList"
                      :disabled="this.batchUp.length === 0">批量下架</el-button></el-option>
                </el-select>
              </el-form-item>
            </el-form>
            <!-- <el-tag effect="plain"> 关联标签 </el-tag> -->
          </div>
        </div>
        <div>
          <el-table border style="width: 100%" :data="tableData" @selection-change="shopBatchUp">
            <el-table-column prop="prodId" type="selection" width="50" align="center">
            </el-table-column>
            <el-table-column label="序号" width="70" align="center" type="index">
              <template slot-scope="scope">
                {{ scope.$index + 1 + (currentPage - 1) * pageSize }}
              </template>
            </el-table-column>
            <el-table-column label="商品图片" align="center" width="180" class="shopImage">
              <template slot-scope="scope">
                <img :src="scope.row.pic" />
              </template>
            </el-table-column>
            <el-table-column prop="prodName" label="商品名称" width="120" align="center">
            </el-table-column>
            <el-table-column prop="articleNumber" label="货号" align="center">
            </el-table-column>
            <el-table-column sortable prop="maxPrice,minPrice" label="价格" align="center">
              <template slot-scope="scope">
                {{ scope.row.maxPrice }} ~ {{ scope.row.minPrice }}
              </template>
            </el-table-column>
            <el-table-column prop="categoryName" label="分类" align="center">
            </el-table-column>
            <el-table-column prop="brand" label="品牌" align="center">
            </el-table-column>
            <el-table-column prop="status" width="80" label="是否上架" align="center">
              <template v-slot="scope">
                <el-switch :value="scope.row.status == 4" @change="isStatus(scope.row.prodId)" active-color="#13ce66"
                  inactive-color="#ff4949">
                </el-switch>
              </template>
            </el-table-column>
            <el-table-column sortable prop="soldNum" label="销量" align="center" width="100">
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template v-slot="scope">
              <!-- <el-button type="text" size="small">
                  <router-link
                    :to="{
                      path: '/home/Shop/EditShopInfo',
                      params: { id: scope.row.prodId },
                    }"
                    >编辑商品</router-link
                  >
                          </el-button> -->
                <el-button type="text" size="small">
                  <router-link :to="{
                    path: '/home/Shop/QueryShopInfo',
                    query: { id: scope.row.prodId },
                  }">查看</router-link>
                </el-button>
                <el-button type="text" size="small" @click="deleteShopData(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!-- 分页 -->
      <div style="margin: 30px auto">
        <el-pagination background align="center" :page-size="pageSize" :current-page="currentPage"
          @current-change="handleCurrentChange" layout="total,prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
    </div>
    <!-- 编辑模态框 -->
    <!-- 查看模态框 -->
  </div>
</template>

<script>
import { mapActions, mapGetters, mapMutations, mapState } from "vuex";
export default {
  name: "shopList",
  data() {
    return {
      activeNames: ["1"],
      currentPage: 1,
      pageSize: 5,
      total: 0,
      tableData: [],
      dsq: "", //定时器
      siftBase: {
        keyWords: "", //关键词
        brand: "", //品牌
        status: "", //是否上架
        classifyOne: "", //一级
        classifyTwo: "", //二级
      },
      classifyOneList: [], //一级分类
      classifyTwoList: [], //二级分类
      options: [],
      batchUp: [], //批量上下架
      value: "", //分类value

      setMethods: {
        batchAction: "", //批量操作
      },
    };
  },
  computed: {
    ...mapState("shop", ["refreshShopTime"]),
  },
  created() { },
  mounted() {
    this.getList();
    //查询所有一级分类
    this.getQueryClass().then((res) => {
      this.classifyOneList = res;
      // console.log("res1", res);
    });
    this.MyRefreshShopTime();
  },
  beforeDestroy() {
    clearInterval(this.dsq);
  },
  methods: {
    ...mapActions("shop", [
      "getShopList",
      "getQueryClass",
      "searchShop",
      "deleteShop",
      "batchUpShop",
      "batchDownShop",
      "shopListTag"
    ]),
    //定时器
    MyRefreshShopTime() {
      let time = this.refreshShopTime;
      console.log(time * 1000 * 60 * 60);
      this.dsq = setInterval(() => {
        this.getList();
      }, time * 1000 * 60 * 60);
    },
    getList() {
      let currentPage = this.currentPage;
      let pageSize = this.pageSize;
      //渲染数据
      this.getShopList({ currentPage, pageSize }).then((res) => {
        // console.log("shopList的currentPage,pageSize", currentPage, pageSize);
        this.tableData = res.data;
        this.total = res.count;
        // console.log("tableData", res.data);
      });
    },
    //switch
    isStatus(prodId) {
      // console.log(prodId);
      let obj = this.tableData.find((item) => {
        return item.prodId == prodId;
      });
      obj.status = obj.status == 4 ? 3 : 4;
      this.getShopList(obj).then((res) => {
        console.log(res);
      });
      // console.log("obj3", obj.status);
    },
    //点击一级分类显示对应二级分类
    changeSelect(value) {
      //value是一级分类的id值
      //先遍历所有的分类，里面包含一级和二级
      for (var i = 0; i < this.classifyOneList.length; i++) {
        //每个一级分类
        var oneClassify = this.classifyOneList[i];
        //判断所有一级分类id和点击一级分类id是否一样
        if (value === oneClassify.categoryId) {
          //从一级分类中获取所有二级分类
          this.classifyTwoList = oneClassify.children;
          this.siftBase.classifyTwo = "";
        }
      }
    },
    //分页
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getShopList({
        currentPage: this.currentPage,
        pageSize: this.pageSize,
      }).then((res) => {
        this.tableData = res.data;
      });
    },
    //搜索
    callback(res) {
      this.tableData = res.data;
      this.total = res.count;
      console.log("res1", res.data);
    },
    searchShopCon() {
      let obj = {
        keyWords: this.siftBase.keyWords,
        categoryId: this.siftBase.classifyTwo,
        status: this.siftBase.status,
        brand: this.siftBase.brand,
      };
      this.searchShop([obj, this.callback]);
      console.log("obj", obj);
    },
    //重置
    resetInput() {
      this.siftBase.keyWords = "";
      this.siftBase.brand = "";
      this.siftBase.status = "";
      this.siftBase.classifyOne = "";
      this.siftBase.classifyTwo = "";
      this.getList();
    },
    //删除
    deleteShopData(row) {
      this.$confirm("是否删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // console.log("h", row.prodId);
          let id = row.prodId;
          this.deleteShop(id).then((res) => {
            this.$message({
              message: "删除成功",
              type: "success",
            });
            this.getList();
          });
        })
        .catch((err) => {
          console.log(err);
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //批量上下架
    shopBatchUp(batchUp) {
      this.batchUp = [];
      this.batchUp = batchUp;
      // console.log('12',batchUp.map(item=>item.prodId));
    },
    //批量上架
    shopBatchUpList() {
      let idList = this.batchUp.map((item) => item.prodId);
      let ids = idList.join(",");
      this.batchUpShop({ ids }).then((res) => {
        this.getList();
        this.setMethods.batchAction = ''
        // console.log('11',res);
      });
    },
    //批量下架
    shopBatchDownList() {
      let idList = this.batchUp.map((item) => item.prodId);
      let ids = idList.join(",");
      this.batchDownShop({ ids }).then((res) => {
        this.getList();
        this.setMethods.batchAction = ''
        // console.log('11',res);
      });
    },
    //标签：全部商品
    allShop() {
      this.getList();
    },
    //标签：已上架
    upShop() {
      this.shopListTag({ currentPage: 1, pageSize: 5, status: 4 }).then(res => {
        this.tableData = res.data;
        this.total = res.count;
      })
    },
    //标签：未上架
    downShop() {
      this.shopListTag({ currentPage: 1, pageSize: 5, status: 3 }).then(res => {
        this.tableData = res.data;
        this.total = res.count;
      })
    }
  },
};
</script>

<style scoped>
html div {
  font-size: 14px;
}

::-webkit-scrollbar {
  display: none;
}

a {
  text-decoration: none;
  color: #409eff;
}

.pageContent {
  width: 100%;
  box-sizing: border-box;
  height: 100%;
  /* overflow-y: scroll; */
}

.shopTitle {
  width: 100%;
  height: 50px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #f0f0f0;
}

.shopListOne {
  height: 26px;
  font-size: 18px;
  font-weight: 400;
  border-left: 6px solid #1cb09a;
  padding-left: 10px;
  margin-left: 20px;
}

.shopListTwo {
  margin-right: 20px;
}

.shopListTwo button {
  background-color: #1cb09a;
  color: #fff;
  padding: 8px 12px;
  border-radius: 4px;
}

.shopListContent {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.shopTag {
  width: 95%;
  margin: 30px 0;
}

.shopTag button {
  height: 30px;
  margin-right: 20px;
  padding: 6px 8px;
}

.shopSift {
  width: 95%;
  background-color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid #e4e4e4;
}

::v-deep .el-collapse {
  width: 100%;
}

::v-deep .el-collapse-item__header {
  box-sizing: border-box;
  padding: 0 18px;
  background-color: #f0f0f0;
}

.siftContent {
  box-sizing: border-box;
  padding: 30px 20px 0;
}

.el-form-item {
  margin-right: 80px;
}

.siftButton {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.siftButton .el-button {
  margin-right: 20px;
  padding: 12px 35px;
}

.shopListData {
  width: 95%;
  margin-top: 25px;
  background-color: #f0f0f0;
}

.dataHead {
  height: 50px;
  box-sizing: border-box;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dataHead-right {
  display: flex;
  align-items: center;
}

.dataHead-right .el-form-item .el-select {
  height: 34px;
  width: 130px;
}

::v-deep .dataHead-right .el-form-item .el-select .el-input__inner {
  line-height: 34px;
  height: 34px;
}

.dataHead-right .el-form-item {
  margin: 0 15px 0 0;
}

::v-deep .cell img {
  width: 100px;
  height: 100px;
}

.chaxun {
  margin: 0px auto;
}

.el-form-item {
  margin-right: 120px;
}



.siftButton {
  width: 100%;
  margin-left: 13px;
  /* display: flex; */
  /* justify-content: center; */
  margin-bottom: 20px;
}
</style>